<template>
    <div>
        <div class="main">
            <div class="main-box">
                <div class="main-inner-left" >
                    <img src="../assets/productImg/shangyun_logo.png" alt="">
                    <span>|</span>
                    <span>shangyuninfo.com</span>
                </div>
                <div class="navigation">
                    <ul>
                        <li class="title" @click="goTop">快速导航</li>
                        <li><a href="/index">首页</a></li>
                        <li><a href="/product">产品</a></li>
                        <li><a href="/lab">星火实验室</a></li>
                        <li><a href="/news">新闻中心</a></li>
                        <li><a href="/myinfo">关于我们</a></li>
                    </ul>
                </div>
                <div class="vx">
                    <h4>官方微信公众号</h4>
                    <div class="code-box">
                        <img :src="`http://www.shangyuninfo.com/api/profile/qrCodeImg/${imgContent}`" alt="">
                    </div>
                </div>
                <div class="contact">
                    <div class="center-box">
                    <h4>联系我们</h4>
                        <ul>
                            <li v-for="(item,index) in companyList" :key="index"><span class="blue">{{item.dictLabel}}：</span><span>{{item.dictValue}}</span></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="main-bottom">
                    <p>
                        版权所有©河北尚云信息科技有限公司2012-2022保留一切权利
                    </p>
            </div>
        </div>
    </div>
</template>

<script>
    import {connectUs, qrCode} from "../api";

    export default {
        name: "blackFooter",
        data(){
            return{
                imgContent:"",//二维码数据
                companyList:"",//公司数据
                Imgtime:"",//定时器
            }
        },
        methods:{
            goTop(){
                this.Imgtime = setInterval(() => {
                    if (document.documentElement.scrollTop > 0) {
                        document.documentElement.scrollTop -= 30;
                    }
                    if (document.documentElement.scrollTop == 0) {
                        clearInterval(this.Imgtime);
                    }
                }, 1)
            }
        },
        created() {
            connectUs().then(res=>{
                this.companyList=res;
            })
            qrCode().then(res=>{
                this.imgContent=res.dictValue;
            })
        },
    }
</script>

<style scoped lang="less">
.main {
    width: 100%;
    background-color: #181819;
    height: 225px;
    min-width: 1200px;
    .main-box {
        display: flex;
        width: 1170px;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
        padding-top: 20px;
        .main-inner-left{
            width: 270px;
            height: 149.2px;
            padding-left: 15px;
            padding-right: 15px;
            padding-top: 40px;
            img {
                width: 120px;
                height: 47.4px;
                vertical-align: middle;
            }
            span {
                color: #59585a;
                margin-left: 10px;
                font-size: 14px;
            }
        }
        .navigation{
            min-height: 1px;
            padding-left: 15px;
            padding-right: 15px;
            margin-left: 10px;
            color: #888889;
            ul {
                li {
                    font-size: 14px;
                    line-height: 29px;
                    width: 220px;
                    height: 29px;
                    a{
                        color: #888889;
                    }
                    a:hover {
                        color: #337ab7;
                    }
                }
                .title{
                    margin-bottom: 15px;
                    color: #337ab7;
                    cursor: pointer;
                a {
                    color: #337ab7;
                }
                }
            }
        }
        .vx {
            width: 270px;
            height: 189.2px;
            padding-left: 15px;
            padding-right: 15px;
            h4{
                color: #fff;
            }
            .code-box {
                margin-top: 20px;
                img {
                    width: 150px;
                    height: 150px;
                }
            }
        }
        .contact{
            width: 270px;
            height: 189.2px;
            padding-left: 15px;
            padding-right: 15px;
            max-width: 25%;
            .center-box {
                height: 146.8px;
                h4 {
                    color: white;
                }
                ul {
                    margin-top: 10px;
                    li {
                        font-size: 14px;
                        padding: 10px 0;
                        span  {
                            color: #888889;
                            font-size: 14px;
                        }
                        .blue {
                            color: #1f8efe;
                        }
                    }
                }
            }
        }
    }
    .main-bottom{
        height: 40px;
        background-color: #000;
        p {
            font-size: 12px;
            text-align: center;
            color: #888889;
            line-height: 40px;
        }
    }
}
</style>